﻿<phone:PhoneApplicationPage 
    x:Class="Coding4Fun.Phone.TestApplication.Samples.ButtonSamples.Tiles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    mc:Ignorable="d" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    xmlns:c4fToolkit="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls" 
    xmlns:c4fToolkitBinding="clr-namespace:Coding4Fun.Phone.Controls.Binding;assembly=Coding4Fun.Phone.Controls" 
    xmlns:sltoolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
    sltoolkit:TiltEffect.IsTiltEnabled="True"

    d:DesignHeight="768" d:DesignWidth="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    Loaded="PhoneApplicationPage_Loaded">

    <phone:PhoneApplicationPage.Resources>
        <Storyboard 
            x:Name="trexStoryboard" 
            AutoReverse="True" 
            RepeatBehavior="Forever"  >
            <DoubleAnimationUsingKeyFrames 
				Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
				Storyboard.TargetName="image">
                <SplineDoubleKeyFrame KeyTime="0:0:1"/>
                <SplineDoubleKeyFrame KeyTime="0:0:36" Value="-307"/>
                <SplineDoubleKeyFrame KeyTime="0:0:37" Value="-307" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0">
            <TextBlock x:Name="PageTitle" Text="tiles" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer>
                <StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <c4fToolkit:Tile 
                            Margin="0, 0, 12, 0"
                            Width="173"
                            Height="173"
                            TextWrapping="Wrap"
                            Title="Coding4Fun Phone Toolkit">
                            <Image 
                                Source="/Coding4Fun.Phone.TestApplication;component/Media/head.png" 
                                Width="100"
                                Height="100"/>
                        </c4fToolkit:Tile>
                        <c4fToolkit:Tile 
                            Margin="0, 0, 12, 0"
                            Width="173"
                            Height="173"
                            Title="Click Me with no text wrapping" Click="Tile_Click">
                            <Grid>
                                <Image 
                                    Source="/Coding4Fun.Phone.TestApplication;component/Media/headWhite_100.png" 
                                    Stretch="None" />
                                <c4fToolkit:TileNotification 
                                    Content="99" />
                            </Grid>
                        </c4fToolkit:Tile>

                    </StackPanel>
                    <c4fToolkit:Tile 
                        HorizontalAlignment="Left"
                        Margin="0, 12"
                        Width="358"
                        Height="173"
                        c4fToolkitBinding:FrameworkElementBinding.ClipToBounds="True"
                        Title="Coding4Fun Phone Toolkit">
                        <Grid>
                            <Canvas>
                                <Image 
					                x:Name="image" 
	        		                Source="/Coding4Fun.Phone.TestApplication;component/Media/trex_360width.jpg" 
	        		                Stretch="None">
                                    <Image.RenderTransform>
                                        <CompositeTransform />
                                    </Image.RenderTransform>
                                </Image>
                            </Canvas>
                            <c4fToolkit:TileNotification
                                Padding="18, 0"
                                Background="{StaticResource PhoneAccentBrush}">
                                <TextBlock>rawr?</TextBlock>
                                <!-- in 7.1, you can skip the need for TextBlock -->
                            </c4fToolkit:TileNotification>
                        </Grid>
                    </c4fToolkit:Tile>

                    <c4fToolkit:Tile 
                        Height="173"
                        Title="Coding4Fun Phone Toolkit">
                        <Grid>
                            <StackPanel 
                                Orientation="Horizontal" 
                                VerticalAlignment="Bottom"
                                HorizontalAlignment="Right"
                                Margin="12, 0">
                                <TextBlock VerticalAlignment="Bottom">
                        <Run>Fri</Run>
                        <Run 
                            FontSize="54"
                            FontWeight="Bold"
                            FontFamily="{StaticResource PhoneFontFamilySemiBold}">
                            15
                        </Run>
                                </TextBlock>

                            </StackPanel>
                            <c4fToolkit:TileNotification
                                Padding="0"
                                Background="Transparent"
                                HorizontalAlignment="Left">
                                <StackPanel Orientation="Horizontal">
                                    <Image 
                                        Height="35"
                                        Stretch="Uniform"
                                        Source="/Coding4Fun.Phone.TestApplication;component/Media/icons/appbar.share.rest.png" />
                                    <TextBlock 
                                        VerticalAlignment="Center">Birthday</TextBlock>
                                </StackPanel>
                            </c4fToolkit:TileNotification>
                        </Grid>
                    </c4fToolkit:Tile>
                    <c4fToolkit:Tile 
                        Margin="0, 12"
                        Height="100"
                        Background="Orange"
                        c4fToolkitBinding:FrameworkElementBinding.ClipToBounds="True"
                        FontSize="28"
                        Foreground="{StaticResource PhoneChromeBrush}"
                        Title="Coding4Fun Phone Toolkit">
                        <Image 
                            HorizontalAlignment="Right"
                            Source="/Coding4Fun.Phone.TestApplication;component/Media/headWhite.png" 
                            Stretch="Uniform" 
                            Height="150"
                            Width="150"
                            Margin="0, -25, -28, 0" />
                    </c4fToolkit:Tile>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>
